<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="../eshop/css/style.css">
    <title>iScroll demo: probe</title>
    <style type="text/css">
        .item{
            display: flex;
            flex-direction: row;
            margin-bottom: 15px;
        }
        .item-right{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-bottom: 15px;
        }
        .user{
            display: flex;
            flex-direction: column;
        }
        .nick-name{
            padding-left: 10px;
            font-weight: bolder;
        }
        .nick-name-right{
            padding-right: 10px;
            text-align: right;
            font-weight: bolder;
        }
        .avatar{
            padding-top:15px;
        }
        #wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
        }
        #scroller {
            position: absolute;
            z-index: 1;
            width: 100%;
        }
        .content{
            padding: 15px;
            background-color: #f1f1f1;
        }
    </style>

    <style type="text/css">
        .msg-content {
            position:relative;
            width:100px;
            background:#1fa67a;
            border-radius:5px; /* 圆角 */
            padding: 5px 10px;
            margin:5px 10px;
            color: white;
        }

        .arrow-right {
            position:absolute;
            top:5px;
            right:-15px; /* 圆角的位置需要细心调试哦 */
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:transparent transparent transparent #1fa67a;
        }

        .arrow-left {
            position:absolute;
            top:5px;
            left:-15px; /* 圆角的位置需要细心调试哦 */
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:transparent #1fa67a transparent transparent;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown" style="display: none">下拉刷新...</div>
        <div id="content" class="content">
            <div class="item-right">
                <div class="user">
                    <div class="nick-name-right">天蓬小猪</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-right"></div>
                    </div>
                </div>
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
            </div>
            <div class="item">
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
                <div class="user">
                    <div class="nick-name">托塔李天王</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-left"></div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
                <div class="user">
                    <div class="nick-name">托塔李天王</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-left"></div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
                <div class="user">
                    <div class="nick-name">托塔李天王</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-left"></div>
                    </div>
                </div>
            </div>
            <div class="item-right">
                <div class="user">
                    <div class="nick-name-right">天蓬小猪</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-right"></div>
                    </div>
                </div>
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
            </div>
            <div class="item-right">
                <div class="user">
                    <div class="nick-name-right">天蓬小猪</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-right"></div>
                    </div>
                </div>
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
            </div>
            <div class="item-right">
            <div class="user">
                <div class="nick-name-right">天蓬小猪</div>
                <div class="msg-content">
                    <span>今天天气不错</span>
                    <div class="arrow-right"></div>
                </div>
            </div>
            <div class="avatar">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                     class="img-circle img-circle-42">
            </div>
        </div>
            <div class="item">
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
                <div class="user">
                    <div class="nick-name">托塔李天王</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-left"></div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
                <div class="user">
                    <div class="nick-name">托塔李天王</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-left"></div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
                <div class="user">
                    <div class="nick-name">托塔李天王</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-left"></div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="avatar">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529750269&di=144d243ec96db665c68638851c567339&imgtype=jpg&er=1&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201704%2F17%2F15d3ba370a20eb62c2de8bdc4b6fb93e.jpg"
                         class="img-circle img-circle-42">
                </div>
                <div class="user">
                    <div class="nick-name">托塔李天王</div>
                    <div class="msg-content">
                        <span>今天天气不错</span>
                        <div class="arrow-left"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="pullUp" style="display: none"> 上拉刷新...</div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll-probe.js"></script>
<script src="../../lib/web/scroll/IScrollUtils.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });
        var config={
            "scrollPullDownEventCallBack": function () {
                $("#content").before("<div>new</div>");
            },
            "scrollPullUpEventCallBack": function () {
                $("#content").after("<div>new PullUp</div>");
            }
        }
        var s = new IScrollUtils(myScroll,config);
        s.scrollEventInit();
    })
</script>
</body>
</html>